import React, { useState } from 'react';
import { Input, Button, Form, message } from 'antd';
const { TextArea } = Input;
import Styles from './style.less';
interface Props {
  onFinish?: (value: { command: string }) => void;
}

const CommandTextArea: React.FC<Props> = ({ onFinish }) => {
  const [state, setState] = useState(false);
  return (
    <Form
      onFinish={async (values: any) => {
        if (values.command) {
          setState(true);
          await onFinish?.(values);
          setState(false);
        } else {
          message.error('请选输入要执行的命令');
        }
      }}
      layout="inline"
    >
      <Form.Item label="命令" name="command" className={Styles.textarea}>
        <TextArea autoSize disabled={state} />
      </Form.Item>
      <Form.Item className={Styles.button}>
        <Button type="primary" htmlType="submit" loading={state}>
          确认
        </Button>
      </Form.Item>
    </Form>
  );
};

export default CommandTextArea;
